<template>
	<el-dialog v-model="display" title="新增配置" width="380px" center>
		<div class="c50">
			<p>所属配置项 {{tabData.activeTab}} ：</p>
			<el-input v-model="tabData.activeTabName" disabled />
			<p>数据类型 data_type ：</p>
			<el-select v-model="conData.form.data_type" placeholder="请选择">
				<el-option :label="v.label" :value="v.value" v-for="(v,i) in data_type" :key="i"></el-option>
			</el-select>
			<template v-if="conData.form.data_type =='json'">
				<p><span>*</span>数据模板 sub_name ：</p>
				<el-select v-model="conData.form.sub_name" placeholder="请选择"  @change="subNameChange">
					<el-option :label="v.label" :value="v.value" v-for="(v,i) in sub_name" :key="i"></el-option>
				</el-select>
			</template>
			<p>键名 key ：</p>
			<el-input v-model.trim="conData.form.key" @blur="blurKey" clearable show-word-limit maxlength="32" placeholder="请输入" />

			<p><span>*</span>名称 title ：</p>
			<el-input v-model.trim="conData.form.title" clearable show-word-limit maxlength="10" placeholder="请输入"/>

			<p>排序 sort (数字越大，配置在越前面，0最小) ：</p>
			<el-input v-model.trim="conData.form.sort" clearable maxlength="32" placeholder="请输入" type="number"/>
			
			<p>备注 notes (选填) ：</p>
			<el-input v-model.trim="conData.form.notes" clearable show-word-limit maxlength="32" placeholder="请输入" />
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="display = false">取消</el-button>
				<el-button type="primary" @click="addConData">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {
		ElMessage,
		defaultImg,
		api
	} = publicJS();
	const emit = defineEmits(['update:show','reload'])
	const props = defineProps({
		show: {
			type:Boolean,
			default:false
		},
		tabData: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	
	const conData = reactive({
		show: false,
		form: {
			title: '',
			data_type: 'json',
			key: props.tabData.activeTab+'_',
			sort: 0,
			sub_name:'',
			notes:'',
		}
	})
	
	const display = ref(true);
	
	watch(props,(newVal,oldVal)=>{
		display.value = newVal.show;
		conData.form.key = newVal.tabData.activeTab+'_'
	},{ immediate: true })
	
	watch(display,(newVal,oldVal)=>{
		emit('update:show', newVal)
	},{ immediate: true })
	
	
	//添加组件
	import subData from "../useSubData.js";
	const {data_type,sub_name,addSubFilter} = subData();
	const addConData = () => {
		if(conData.form.data_type =='json' && conData.form.sub_name == '')return ElMessage.error('请选择数据模板')
		if(conData.form.title == '')return ElMessage.error('请输入配置项名称')
		

		display.value = false;
		//新增普通配置
		api.post('a/common/add_config_list', {
			title: conData.form.title,
			data_type: conData.form.data_type,
			value:addSubFilter(conData),
			type: props.tabData.activeTab,
			key: conData.form.key,
			sub_name: conData.form.sub_name,
			notes: conData.form.notes,
			sort: conData.form.sort ? conData.form.sort : 0,
		}).then(res => {
			emit('reload')
		})
	}
	
	//选择组件 判断
	const subNameChange = (v)=>{
		if(v != 'imgText'){
			conData.form.notes = 'arr'
		}else{
			conData.form.notes = ''
		}
	}
	
	const blurKey = ()=>{
		if(conData.form.data_type == 'json' && conData.form.key){
			api.post('a/common/check_config_key', {
				key: conData.form.key,
			}).then(res => {
				if(res.data?.id){
					ElMessage.warning('键名key值'+ conData.form.key+'已被占用，请更换')
				}
			})
		}
	}

</script>

<style scoped lang="scss">
	.c50 p {
		line-height: 30px;
		margin-top: 10px;
		span{color: #c00;display:inline-block;margin-right: 5px;}
	}
	
	.c50 .el-select {
		width: 100%;
	}
</style>